<template>
  <!-- 弹窗中的 温湿度监控 -->
  <div class="humMonitor">
    <div class="selectedBox">
      <div class="pickTime">
          <date-range-picker
          @passDate="passTmpDate" 
          :startTime="new Date().toLocaleDateString()" 
          :endTime="new Date().toLocaleDateString()" />
      </div> 
      <el-select  placeholder="请选择" name="role" size="small" v-model="humitureSerial" @change="setChartData()">
        <el-option v-for="(item,index) in selectList" :key="index" :label="item.alias" :value="item.serial">
        </el-option>
      </el-select>
    </div>
    <div id="humChart"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import * as api from '@/api' 
import { ONE_DAY_MS } from '@/consts/consts'
import { chartTemHum } from '@/consts/chartTemHum'
import { dayStartTime, dayEndTime } from '@/utils/timeUtil'
let myChart = null
export default {
  data() {
    return {
      dayTime: dayStartTime(new Date().getTime()),
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      DateTime: [],
      chartData: [],
      selectList:[],
      queryObj: {
        time_start: dayStartTime(new Date().getTime()),
        time_end: dayEndTime(new Date().getTime())
      },
      isOneDay: false,
      showModeTip: true,
      legendSelected: {},
      humitureSerial:''
    }
  },
  watch: {
    queryObj(val) {
      this.equipmentInfoData()
    }
  },
  computed: {
    ...mapState(['deviceDetail'])
  },
  methods: {
     // 时间筛选
    passTmpDate (v) {
      console.log('passTmpDate:', v)
      this.isOneDay = v[1] - v[0] <= ONE_DAY_MS
      console.log('isOneDay:::',this.isOneDay)
      this.queryObj.time_start = v[0]
      this.queryObj.time_end = v[1]
      this.equipmentInfoData()
    },
    // 筛选温湿度传感器
    setChartData() {
      this.equipmentInfoData()
    },
    draw() {
      myChart = this.$echarts.init(document.getElementById('humChart'))
      const opt = chartTemHum(
        this.chartData,
        this.queryObj.time_start,
        this.queryObj.time_end,
        this.isOneDay,
      )
      myChart.setOption(opt)
      myChart.resize()
    },

    changeLegendSelect (p) {
      let s = []
      for (let k in p.selected) {
        s.push(p.selected[k])
        this.legendSelected[k] = p.selected[k]
      }
      this.showModeTip = s.indexOf(true) >= 0
    },

    // passDate (v) {
    //   if (v[1] - v[0] >= 31 * ONE_DAY_MS) {
    //     this.$message({
    //       type: 'warning',
    //       message: '查询范围不可超过一个月'
    //     })
    //   } else {
    //     if (v[1] - v[0] <= ONE_DAY_MS) {
    //       this.isOneDay = true
    //     } else {
    //       this.isOneDay = false
    //       this.dataInterval = null
    //     }
    //     this.queryObj = {
    //       time_start: dayStartTime(v[0]),
    //       time_end: dayEndTime(v[1])
    //     }
    //     this.chartData = []
    //     this.equipmentInfoData()
    //   }
    // },
    // 根绝设备类型查询设备serial
    async getSerialByType(){
      const { code, data } = await api.device.devicesList({
        device_type:'7003',
        branch_number:this.$route.query.branch_number,
        offset:0,
        limit:10
      })
      if(code === 0){
        console.log('设备类型',data)
        this.selectList = data
        this.humitureSerial=data[0].serial
      }
      this.equipmentInfoData()
    },
    // 图表数据 查询温湿度传感器的数据
    async equipmentInfoData() {
      const { code, data } = await api.core.equipmentInfoData({
        offset: 0,
        limit: -1
      }, {
        device_type: '7003',
        hub_id: this.$route.query.branch_number,
        serial: this.humitureSerial,
        time_start: this.queryObj.time_start,
        time_end: this.queryObj.time_end,
        desc: 1
      })
      if (code === 0) {  
        const chartData = data.map(item => {
          item.data = typeof item.data === 'string' ? JSON.parse(item.data) : item.data
          return item
        })
        this.chartData = chartData.sort((a, b) => {
          return (a.upload) > (b.upload) ? 1 : -1
        })
        console.log('chartsData',this.chartData)
        this.draw()
      }
    }
  },
  created () {
    this.isOneDay = this.queryObj.time_end - this.queryObj.time_start <= ONE_DAY_MS
    this.getSerialByType()
    // this.equipmentInfoData()
  },
  mounted () {
    
  },
}
</script>

<style lang="stylus">
.humMonitor {
  position: relative;
  .selectedBox {
    position: absolute;
    left: getPx(100);
    z-index: 55;
    flexMiddle(flex-start);
    .pickTime {
      width: 260px;
      margin-right:getPx(20)
    }
  }
  #humChart {
    height: getPx(500);
  }
  @media screen and (max-height:$h){
    #humChart {
      height: getPx(410);
      // width: getPx()
    }
  }
}

</style>